<template>
  <div class="hello">
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <h1 class="title">Welcome to Codinglab</h1>
      </div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="6"><div class="grid-content bg-purple">
        <div class="f-box">
          <div class="f-box-content">
            <img src="../assets/img/zhi.png" alt="知乎专栏" >
            <!-- <i class="iconfont icon-zhihu qiuzhiyixiang"></i> -->
            <h3>知乎专栏</h3>
            <p>知乎记录编程心得，项目研发所踩过的坑，以及一些常用编程技巧的备忘录</p>
          </div>
        </div>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light">
        <div class="f-box">
          <div class="f-box-content">
            <i class="iconfont icon-qiuzhiyixiang qiuzhiyixiang"></i>
            <h3>内推小王子</h3>
            <p>知乎记录编程心得，项目研发所踩过的坑，以及一些常用编程技巧的备忘录</p>
          </div>
        </div>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <div class="f-box">
          <div class="f-box-content">
            <i class="iconfont icon-shangdian qiuzhiyixiang"></i>
            <h3>大梦想程序商店</h3>
            <p>知乎记录编程心得，项目研发所踩过的坑，以及一些常用编程技巧的备忘录</p>
          </div>
        </div>
      </div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="6"><div class="grid-content bg-purple">
        <div class="f-box">
          <div class="f-box-content">
            <i class="iconfont icon-luntanzixun qiuzhiyixiang"></i>
            <h3>雪粉团</h3>
            <p>知乎记录编程心得，项目研发所踩过的坑，以及一些常用编程技巧的备忘录</p>
          </div>
        </div>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light">
        <div class="f-box">
          <div class="f-box-content">
            <i class="iconfont icon-pengyou qiuzhiyixiang"></i>
            <h3>天天老友</h3>
            <p>知乎记录编程心得，项目研发所踩过的坑，以及一些常用编程技巧的备忘录</p>
          </div>
        </div>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <div class="f-box">
          <div class="f-box-content">
            <i class="iconfont icon-shijian1 qiuzhiyixiang"></i>
            <h3>7天时间</h3>
            <p>知乎记录编程心得，项目研发所踩过的坑，以及一些常用编程技巧的备忘录</p>
          </div>
        </div>
      </div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="6"><div class="grid-content bg-purple">
        <div class="f-box">
          <div class="f-box-content">
            <i class="iconfont icon-keshihuaguanli qiuzhiyixiang"></i>
            <h3>可视化</h3>
            <p>知乎记录编程心得，项目研发所踩过的坑，以及一些常用编程技巧的备忘录</p>
          </div>
        </div>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light">
        <div class="f-box">
          <div class="f-box-content">
            <i class="iconfont icon-iconsheji- qiuzhiyixiang"></i>
            <h3>内推小王子后台管理</h3>
            <p>知乎记录编程心得，项目研发所踩过的坑，以及一些常用编程技巧的备忘录</p>
          </div>
        </div>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <div class="f-box">
          <div class="f-box-content">
            <i class="iconfont icon-pengyouquan qiuzhiyixiang"></i>
            <h3>大梦想程序商店后台管理</h3>
            <p>知乎记录编程心得，项目研发所踩过的坑，以及一些常用编程技巧的备忘录</p>
          </div>
        </div>
      </div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="6"><div class="grid-content bg-purple">
        <div class="f-box">
          <div class="f-box-content">
            <i class="iconfont icon-iconsheji- qiuzhiyixiang"></i>
            <h3>资讯后台管理系统</h3>
            <p>知乎记录编程心得，项目研发所踩过的坑，以及一些常用编程技巧的备忘录</p>
          </div>
        </div>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light">
        <div class="f-box">
          <div class="f-box-content">
            <i class="iconfont icon-houtai10 qiuzhiyixiang"></i>
            <h3>景瑞科技</h3>
            <p>知乎记录编程心得，项目研发所踩过的坑，以及一些常用编程技巧的备忘录</p>
          </div>
        </div>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <div class="f-box">
          <div class="f-box-content">
            <i class="iconfont icon-keshihuaguanli qiuzhiyixiang"></i>
            <h3>浙江吉磊融资租赁</h3>
            <p>知乎记录编程心得，项目研发所踩过的坑，以及一些常用编程技巧的备忘录</p>
          </div>
        </div>
      </div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      sg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
i{
  font-size: 55px;
  margin-bottom: 20px;
}
.qiuzhiyixiang{
  color: #ff5459;
}
.icon-shangdian:before{
  color: #b47cc7;
}
.icon-luntanzixun:before{
  color: cadetblue;
}
.icon-pengyou:before{
  color: sandybrown;
}
.icon-shijian1:before{
  color:slategrey;
}
.icon-keshihuaguanli:before{
  color: darkkhaki;
}
.icon-iconsheji-:before{
  color: #b47cc7;
}
.icon-houtai10:before{
  color:darksalmon;
}
.icon-pengyouquan:before{
  color: royalblue;
}
img{
  width: 50px;
  border-radius: 50px;
  margin: 0 auto;
}
p,h3{
  margin-top: 15px;
}
p{
  font-size: 12px;
}
.f-box{
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  min-height: 210px;
  margin-bottom: 20px;
  transition-duration: 500ms;
  transition-property: width, background;
  transition-timing-function: ease;
  -webkit-transition-duration: 500ms;
  -webkit-transition-property: width, background;
  -webkit-transition-timing-function: ease;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.f-box:hover{
  background: rgba(64,158,255,.7);
  color: #FFF;
}
.f-box:hover .qiuzhiyixiang{
  color: #FFF;
}
.title{
  color: #475168;
  font-size: 30px;
  font-weight: 300;
  text-transform: uppercase;
  margin-top: 0;
  text-align: center;
  margin-bottom: 50px;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
